본문으로 건너뛰기

렌더링 최적화 기법

React 애플리케이션을 개발하다 보면 성능 최적화가 중요한 경우가 많습니다. 성능을 최적화하면 사용자 경험이 개선되고, 애플리케이션이 더욱 부드럽게 동작할 수 있습니다. 이 문서에서는 React 컴포넌트의 렌더링 최적화 기법에 대해 자세히 설명하겠습니다.

1. 불필요한 렌더링 피하기​

React.memo 사용하기​

React.memo는 컴포넌트가 동일한 props로 다시 렌더링되는 것을 방지합니다. 이를 통해 불필요한 렌더링을 피할 수 있습니다.

import React from 'react';

const MyComponent = React.memo(({ name }) => {
  console.log('렌더링 중...');
  return <div>{name}</div>;
});

export default MyComponent;

위 예시에서 MyComponent는 props가 변경되지 않는 한 다시 렌더링되지 않습니다.

2. useCallback과 useMemo 사용하기​

useCallback​

useCallback은 함수형 컴포넌트 내에서 함수를 메모이제이션합니다. 이를 통해 동일한 함수가 여러 번 생성되는 것을 방지합니다.

import React, { useState, useCallback } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return <button onClick={handleClick}>Click me</button>;
};

export default MyComponent;

useMemo​

useMemo는 값의 메모이제이션을 위해 사용됩니다. 복잡한 계산을 매번 하지 않고, 의존성이 변경될 때만 계산합니다.

import React, { useState, useMemo } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const expensiveCalculation = (num) => {
    console.log('복잡한 계산 중...');
    return num * 2;
  };

  const memoizedValue = useMemo(() => expensiveCalculation(count), [count]);

  return <div>{memoizedValue}</div>;
};

export default MyComponent;

3. 리스트 렌더링 최적화​

Key 속성 사용하기​

리스트를 렌더링할 때는 각 항목에 고유한 key 속성을 지정해야 합니다. 이를 통해 React는 항목을 효율적으로 업데이트할 수 있습니다.

import React from 'react';

const ListComponent = ({ items }) => {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

export default ListComponent;

Virtualized 리스트​

많은 수의 항목을 렌더링할 때는 가상화 기법을 사용하여 성능을 개선할 수 있습니다. react-window나 react-virtualized 같은 라이브러리를 사용할 수 있습니다.

import React from 'react';
import { FixedSizeList as List } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>Row {index}</div>
);

const MyComponent = ({ items }) => (
  <List
    height={150}
    itemCount={items.length}
    itemSize={35}
    width={300}
  >
    {Row}
  </List>
);

export default MyComponent;

4. useEffect 최적화​

useEffect 훅을 사용할 때는 종속성 배열을 정확히 설정하여 불필요한 렌더링을 피해야 합니다. 종속성 배열이 변경될 때만 이펙트가 실행되도록 설정합니다.

import React, { useState, useEffect } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('이펙트 실행');
  }, [count]); // count가 변경될 때만 실행

  return <button onClick={() => setCount(count + 1)}>Click me</button>;
};

export default MyComponent;

더 알아보기​

  • React.memo: 컴포넌트의 불필요한 렌더링을 방지하는 방법.
  • useCallback: 함수 메모이제이션으로 렌더링 최적화.
  • useMemo: 값 메모이제이션으로 렌더링 최적화.
  • 리스트 가상화: react-window, react-virtualized 라이브러리.

내용 요약​

React 애플리케이션의 성능 최적화를 위해 불필요한 렌더링을 피하고, React.memo, useCallback, useMemo와 같은 메모이제이션 기법을 사용합니다. 또한, 리스트를 렌더링할 때는 고유한 key 속성을 사용하고, 가상화 기법을 적용하여 성능을 개선할 수 있습니다. 마지막으로, useEffect 훅을 최적화하여 필요한 경우에만 이펙트가 실행되도록 설정합니다.